<template>
  <view 
    class="bg-icon"
    :style="iconStyle"
  ></view>
</template>

<script>
export default {
  name: 'BgIcon',
  props: {
    name: {
      type: String,
      required: true
    },
    size: {
      type: [Number, String],
      default: 20
    },
    // 背景图片路径
    src: {
      type: String,
      default: ''
    }
  },
  computed: {
    iconStyle() {
      const style = {
        width: this.size + 'px',
        height: this.size + 'px',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center'
      }
      
      // 如果有传入src，使用传入的路径
      if (this.src) {
        style.backgroundImage = `url(${this.src})`
      } else {
        // 否则根据name生成默认路径
        style.backgroundImage = `url(/static/images/icons/${this.name}.png)`
      }
      
      return style
    }
  }
}
</script>

<style scoped>
.bg-icon {
  display: inline-block;
  vertical-align: middle;
}
</style> 